<template>
  <div class="accompany-list">
    <div class="accompany-detail">
      <div class="accompany-img"></div>
      <div class="accompany-desc">
        <span class="accompant-title">title</span>
        <div class="accompany-data">
            <div>
                          <img src="../assets/download.png" style="width: 15px; height: 15px; margin-right:3px">
          <span class="accompany-date">9999</span
          >
            </div>

          <span class="accompany-date">2022-01-20</span>
        </div>
      </div>
    </div>
    <div class="accompany-detail">
      <div class="accompany-img"></div>
      <div class="accompany-desc">
        <span class="accompant-title">title</span>
        <div class="accompany-data">
            <div>
                          <img src="../assets/download.png" style="width: 15px; height: 15px; margin-right:3px">
          <span class="accompany-date">9999</span
          >
            </div>
            <div>
         <img src="../assets/time-fill.png" style="width: 15px; height: 15px; margin-left:8px">
          <span class="accompany-date">2022-01-20</span>
            </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "AccompanyFromCenter.vue",
  components: {},
};
</script>

<style scoped>
.accompany-list {
  margin-left: 50px;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
}
.accompany-detail {

    width: 200px;

}
.accompany-img {
  margin: 20px;
  width: 170px;
  height: 170px;
  background: #ede8e8;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
}
.accompany-desc {
  margin: 20px;
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.accompant-title {
  font-size: 14px;
  font-weight: 300;
  font-family: pingfang;
}
.accompany-date {
  font-size: 12px;
  font-family: Pingfang;
  color: #999999;
  font-weight: 200;

}
.accompany-data {
    width: 170px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>